import React, { useState } from 'react'
import { AtInput, AtIcon, AtTabs, AtTabsPane, AtButton, AtTabBar } from 'taro-ui'
import { View, Text, Image, } from '@tarojs/components'
import "taro-ui/dist/style/components/button.scss";
import "taro-ui/dist/style/components/tabs.scss";
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/avatar.scss";
import "taro-ui/dist/style/components/tab-bar.scss";
import "taro-ui/dist/style/components/badge.scss";
import './index2.less';

function Index2() {

  const [value, setValue] = useState('');
  const [current, setCurrent] = useState(0);
  const handleChange = (value) => {
    setValue(value);
    // 在小程序中，如果想改变 value 的值，需要 `return value` 从而改变输入框的当前值
    return value
  }
  const handleClick = (value) => {
    setCurrent(value);
    return value
  }
  const tabList = [{ title: '待接单' }, { title: '待服务' }, { title: '服务中' }, { title: '已完成' }, { title: '已取消' }]

  // tabBar参数 
  // const [tabNum, setTabNum] = useState(0);
  // const handleClick2 = (value) => {
  //   setTabNum(value)
  // }

  return <View className='indexCss'>
    {/* 搜索框 */}
    <View className="searchBox">
      <AtIcon value='search' size='18' color='#eee' className="iconCss1"></AtIcon>
      <AtInput
        className="inputCss1"
        name='value'
        type='text'
        placeholder='请输入订单号/姓名/服务'
        value={value}
        onChange={handleChange}
      />
    </View>
    {/* tab选项卡 */}
    <View className="tabBox">
      <AtTabs current={current} tabList={tabList} onClick={handleClick} scroll>
        <AtTabsPane current={current} index={0} >
          {/* 第一个标签里面的全部内容 */}
          <View className="tabList1Css">
            {/* 第一个服务 */}
            <View className="tab1">
              {/* 导航 */}
              <View className="tabNav1">
                {/* 前面部分 */}
                <View className="tabNav1_1">
                  <View className="tabNav1Img">
                    <Image style={{ width: '50px', height: '50px' }} src='https://img2.baidu.com/it/u=3968920317,2966327604&fm=224&fmt=auto&gp=0.jpg'></Image>
                  </View>
                  <View className="tabNav1Con">
                    <Text className="tabNav1Con1">助医服务</Text>
                    <View className="tabNav1Con2">
                      <Text>￥</Text>
                      <Text>38</Text>
                    </View>
                  </View>
                </View>
                {/* 后面部分 */}
                <View className="tabNav1_2">
                  <Text>待接单</Text>
                  <Text className="transBill">(转单)</Text>
                </View>
              </View>
              {/* 导航下的服务详情 */}
              <View className="tabBotmBox1">
                <View><Text>服务用户：</Text><Text>李益民</Text></View>
                <View><Text>服务地址：</Text><Text>上海市黄浦区黄浦江百年</Text></View>
                <View><Text>服务时间：</Text><Text>立即服务</Text></View>
                <View className="billInfo"><Text>转单说明：</Text><Text>帮忙服务下</Text></View>
                <View className="btnBox">
                  <AtButton>转单</AtButton>
                  <AtButton>取消订单</AtButton>
                  <AtButton type='primary'>接单</AtButton>
                </View>
              </View>
            </View>
          </View>
        </AtTabsPane>
        <AtTabsPane current={current} index={1}>
          {/* 第二个标签里面的全部内容 */}
          <View className="tabList1Css">
            {/* 第一个服务 */}
            <View className="tab1">
              {/* 导航 */}
              <View className="tabNav1">
                {/* 前面部分 */}
                <View className="tabNav1_1">
                  <View className="tabNav1Img">
                    <Image style={{ width: '50px', height: '50px' }} src='https://img2.baidu.com/it/u=3968920317,2966327604&fm=224&fmt=auto&gp=0.jpg'></Image>
                  </View>
                  <View className="tabNav1Con">
                    <Text className="tabNav1Con1">助医服务</Text>
                    <View className="tabNav1Con2">
                      <Text>￥</Text>
                      <Text>38</Text>
                    </View>
                  </View>
                </View>
                {/* 后面部分 */}
                <View className="tabNav1_2">
                  <Text>距离用户300m</Text>
                </View>
              </View>
              {/* 导航下的服务详情 */}
              <View className="tabBotmBox1">
                <View><Text>服务用户：</Text><Text>李益民</Text></View>
                <View><Text>服务地址：</Text><Text>上海市黄浦区黄浦江百年</Text></View>
                <View><Text>服务时间：</Text><Text>立即服务</Text></View>
                <View className="btnBox">
                  <AtButton>转单</AtButton>
                  <AtButton>取消订单</AtButton>
                  <AtButton type='primary'>开始服务</AtButton>
                </View>
              </View>
            </View>
          </View>
        </AtTabsPane>
        <AtTabsPane current={current} index={2}>
          {/* 第三个标签里面的全部内容 */}
          <View className="tabList1Css">
            {/* 第一个服务 */}
            <View className="tab1">
              {/* 导航 */}
              <View className="tabNav1">
                {/* 前面部分 */}
                <View className="tabNav1_1">
                  <View className="tabNav1Img">
                    <Image style={{ width: '50px', height: '50px' }} src='https://img2.baidu.com/it/u=3968920317,2966327604&fm=224&fmt=auto&gp=0.jpg'></Image>
                  </View>
                  <View className="tabNav1Con">
                    <Text className="tabNav1Con1">助医服务</Text>
                    <View className="tabNav1Con2">
                      <Text>￥</Text>
                      <Text>38</Text>
                    </View>
                  </View>
                </View>
                {/* 后面部分 */}
                <View className="tabNav1_2">
                  <Text>服务中</Text>
                </View>
              </View>
              {/* 导航下的服务详情 */}
              <View className="tabBotmBox1">
                <View><Text>服务用户：</Text><Text>李益民</Text></View>
                <View><Text>服务地址：</Text><Text>上海市黄浦区黄浦江百年</Text></View>
                <View><Text>服务时间：</Text><Text>立即服务</Text></View>
                <View className="btnBox">
                  <AtButton>取消订单</AtButton>
                  <AtButton type='primary'>确认完成</AtButton>
                </View>
              </View>
            </View>
          </View>
        </AtTabsPane>
        <AtTabsPane current={current} index={3}>
          {/* 第四个标签里面的全部内容 */}
          <View className="tabList1Css">
            {/* 第一个服务 */}
            <View className="tab1">
              {/* 导航 */}
              <View className="tabNav1">
                {/* 前面部分 */}
                <View className="tabNav1_1">
                  <View className="tabNav1Img">
                    <Image style={{ width: '50px', height: '50px' }} src='https://img2.baidu.com/it/u=3968920317,2966327604&fm=224&fmt=auto&gp=0.jpg'></Image>
                  </View>
                  <View className="tabNav1Con">
                    <Text className="tabNav1Con1">助医服务</Text>
                    <View className="tabNav1Con2">
                      <Text>￥</Text>
                      <Text>38</Text>
                    </View>
                  </View>
                </View>
                {/* 后面部分 */}
                <View className="tabNav1_2">
                  <Text>已完成</Text>
                </View>
              </View>
              {/* 导航下的服务详情 */}
              <View className="tabBotmBox1">
                <View><Text>服务用户：</Text><Text>李益民</Text></View>
                <View><Text>服务地址：</Text><Text>上海市黄浦区黄浦江百年</Text></View>
                <View><Text>服务时间：</Text><Text>立即服务</Text></View>
                <View className="billInfo"><Text>转单说明：</Text><Text>帮忙服务下</Text></View>
                <View className="btnBox">
                  <AtButton type='primary'>评价</AtButton>
                </View>
              </View>
            </View>
          </View>
        </AtTabsPane>
        <AtTabsPane current={current} index={4}>
          {/* 第五个标签里面的全部内容 */}
          <View className="tabList1Css">
            {/* 第一个服务 */}
            <View className="tab1">
              {/* 导航 */}
              <View className="tabNav1">
                {/* 前面部分 */}
                <View className="tabNav1_1">
                  <View className="tabNav1Img">
                    <Image style={{ width: '50px', height: '50px' }} src='https://img2.baidu.com/it/u=3968920317,2966327604&fm=224&fmt=auto&gp=0.jpg'></Image>
                  </View>
                  <View className="tabNav1Con">
                    <Text className="tabNav1Con1">助医服务</Text>
                    <View className="tabNav1Con2">
                      <Text>￥</Text>
                      <Text>38</Text>
                    </View>
                  </View>
                </View>
                {/* 后面部分 */}
                <View className="tabNav1_2">
                  <Text className="cancelCss">已取消</Text>
                </View>
              </View>
              {/* 导航下的服务详情 */}
              <View className="tabBotmBox1">
                <View><Text>服务用户：</Text><Text>李益民</Text></View>
                <View><Text>服务地址：</Text><Text>上海市黄浦区黄浦江百年</Text></View>
                <View><Text>服务时间：</Text><Text>立即服务</Text></View>
                <View><Text>取消原因：</Text><Text>不需要了</Text></View>
              </View>
            </View>
          </View>
        </AtTabsPane>
      </AtTabs>
    </View>
    {/* 发起服务按钮框 */}
    <View className="severBtn">
      <AtButton type='primary' circle full>发起服务</AtButton>
    </View>

  </View>

}

export default Index2;